<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
			function morespace(objid){
				var obj=getById(objid);
				obj.style.lineHeight=parseInt(obj.style.lineHeight)+5+"px";
			}
			function getlocation(objid){
				var obj=getById(objid);
				var x=obj.style.left;
				var y=obj.style.top;
				var h=obj.style.lineHeight;
				var w=obj.style.width;
				alert("location:("+x+","+y+"),(width,line-height)=("+w+","+h+")");
			}
			function moveobj(objid){
				var obj=getById(objid);
				obj.style.left=300;
				obj.style.top=100;
			}
			function moveright(objid){
				var obj=getById(objid);
				obj.style.left=parseInt(obj.style.left)+10;
				//obj.style.top=parseInt(obj.style.top)+10;
			}
			function moveobj2(objid){
				var obj=getById(objid);
				obj.style.left=parseInt(obj.style.left)+10;
				obj.style.top=parseInt(obj.style.top)+10;
				obj.style.width=parseInt(obj.style.width)+10;
				obj.style.height=parseInt(obj.style.height)+10;
				if(parseInt(obj.style.top)<200){
					setTimeout("moveobj2('"+objid+"')",1000);
				}
			}
			function centerobj2(objid){
				var obj=getById(objid);
				var w=parseInt(obj.style.width);
				var cw=document.body.clientWidth;
				var h=parseInt(obj.style.height);
				var ch=document.body.clientHeight;
				obj.style.left=(cw-w)/2;
				obj.style.top=(ch-h)/2;
				alert(obj.style.left+"----"+obj.style.top);
			}
			function getById(id){
				return document.getElementById(id);
			}
        </script>
    </head>
    <body>
    	<div id="myobject" style="position:absolute;left:200px;top:50px;width:150px;font-size:13px;line-height:18px;background-color:#CC6633;">
    		this is my object and it has lots of text for us.
    	</div>
		<br>
		<div id="myobject2" style="position:absolute;left:300px;top:200px;width:100px;height:50px;font-size:13px;background-color:#CCCCCC;">
    		this is my object2.
			<br>
			<a href="#" onclick="moveobj2('myobject2');">move</a>
			<br>
			<a href="#" onclick="centerobj2('myobject2');">center</a>
    	</div>
		<a href="#" onclick="morespace('myobject');">increase the line spacing</a>
		<br>
		<a href="#" onclick="getlocation('myobject');">loaction</a>
		<br>
		<a href="#" onclick="moveobj('myobject');">move(300,100)</a>
		<br>
		<a href="#" onclick="moveright('myobject');">move right</a>
		
    </body>
</html>
